div.uno {
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.uno:hover {
transform: translate(50px,100px);}

div.dos{
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.dos:hover {
  transform: rotate(20deg);}

div.tres {
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.tres:hover {
 transform: rotate(-20deg);}

div.cuatro {
     margin: 150px;
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.cuatro:hover {
 transform: scale(2, 3);}

div.cinco {
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.cinco:hover {
 transform: scale(0.5, 0.5);}

 div.seis {
    margin: 150px;
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.seis:hover {
 transform: scaleX(2);}

div.siete {
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.siete:hover {
  transform: scaleX(0.5);}

 div.ocho {
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.ocho:hover {
  transform: scaleY(3);}

 div.nueve {
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.nueve:hover {
transform: scaleY(0.5);}

 div.diez {
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.diez:hover {
 transform: skewX(20deg);}

  div.once {
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.once:hover {
  transform: skew(50deg, 10deg);}

  div.doce {
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  
}
div.doce:hover {
 transform: skew(20deg);}

  div.trece {
  width: 300px;
  height: 100px;
   background-image: linear-gradient(red,blue);
  border: 1px solid black;
  transition: transform 0.5s ease;
  
}
div.trece:hover {
 transform: matrix(1, -0.3, 0, 1, 0, 0);}